<template>
    <div class="home-container">
        <van-nav-bar title="阶段练习" fixed/>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <!--实现上拉加载-->
            <van-list
                    v-model:loading="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
            >
                <ArticleInfo v-for="item in articles"
                             :key="item.id"
                             :title="item.title"
                             :content="item.content"
                             :authorName="item.authorName"
                             :cmtCount="item.cmtCount"
                             :pushDate="item.pushDate"
                ></ArticleInfo>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
    import {Dialog} from 'vant';
    import {getArticlesAPI} from '@/api/ArticleAPI.js';
    import ArticleInfo from '@/components/article/ArticleInfo.vue';

    export default {
        name: "Home",
        data() {
            return {
                currentPage: 1,
                pageSize: 10,
                articles: [],
                //loading为false触发onLoad事件，第一次由created触发，所以这里默认进来设置为true，不触发onLoad事件
                loading: true,
                finished: false,
                //下拉刷新
                refreshing:false,
            }
        },
        components: {ArticleInfo},
        methods: {
            onRefresh(){
                console.log("下拉刷新刷新***")
            //    待开发
            },
            onLoad() {
                console.log('触发上拉加载loading***');
                this.currentPage += 1;
                this.searchList();
            },
            async searchList() {
                const {data: res} = await getArticlesAPI(this.currentPage, this.pageSize);
                this.loading = false;
                if (res.code === '0') {
                    this.articles = [...this.articles, ...res.list];
                    if (res.list.length === 0) {
                        this.finished = true;
                    }
                } else {
                    Dialog.alert({
                        message: res.msg,
                    }).then(() => {
                        // on close
                    });
                }
            }
        },
        created() {
            this.searchList();
        }
    }
</script>

<style lang="less" scoped>
    .home-container {
        padding: 46px 0 50px 0;

        /*组件内此属性有识别身份的 data-v-** 的属性，所以不需要加deep也能定位到  */

        .van-nav-bar {
            background-color: #5bc0de;
        }

        /*本身没有data-v-** 属性修饰，需要用deep来锁定身份 */

        /deep/ .van-nav-bar__title {
            color: white;
        }
    }
</style>
